知识篇 -- Vue Router：构建单页应用的导航系统

在现代前端开发中，单页应用（Single Page Application, SPA）已经成为主流。SPA通过动态重写当前页面而不是从服务器加载整个新页面来与用户交互，从而提供更流畅的用户体验。Vue Router 是Vue.js官方的路由管理器，它与Vue.js核心深度集成，可以轻松构建功能强大的单页应用。

什么是Vue Router？

Vue Router是Vue.js的官方路由。它与Vue.js核心深度集成，让构建单页应用变得轻而易举。使用Vue Router，你可以将组件映射到不同的URL路径，并在用户导航时动态地渲染相应的组件，而无需重新加载整个页面。

核心特性：

• 路由映射：将URL路径映射到Vue组件。
• 动态路由匹配：支持带有参数的路由。
• 嵌套路由：支持多层级的路由结构。
• 导航守卫：在路由跳转过程中进行权限验证、数据加载等操作。
• 路由元信息：为路由添加自定义数据。
• 编程式导航：通过JavaScript控制路由跳转。

Vue Router的基本使用

1. 安装

首先，你需要安装Vue Router。

npm install vue-router
# 或者
yarn add vue-router

2. 创建路由实例

在你的Vue应用中，创建一个 router 实例，并定义路由配置。

router/index.js：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(VueRouter); // 安装Vue Router插件

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: About
    }
];

const router = new VueRouter({
    mode: 'history', // 路由模式：'hash' (默认) 或 'history'
    routes
});

export default router;

3. 挂载到Vue实例

将创建的 router 实例挂载到Vue根实例中。

main.js：

import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 导入路由实例

new Vue({
    router, // 注入路由
    render: h => h(App)
}).$mount('#app');

4. 路由链接与路由视图

在Vue组件的模板中，使用 <router-link> 创建导航链接，使用 <router-view> 显示匹配到的组件。

App.vue：

<template>
    <div id="app">
        <nav>
            <router-link to="/">首页</router-link> |
            <router-link to="/about">关于</router-link>
        </nav>
        <router-view></router-view> <!-- 路由匹配到的组件将渲染在这里 -->
    </div>
</template>

动态路由匹配

当需要将同一个组件映射到不同的URL模式时，可以使用动态路由。

router/index.js：

const routes = [
    // ...
    {
        path: '/user/:id', // :id 是一个动态片段
        name: 'User',
        component: () => import('../views/User.vue') // 懒加载组件
    }
];

User.vue：

<template>
    <div>
        <h2>用户详情</h2>
        <p>用户ID: {{ $route.params.id }}</p>
        <button @click="goToHome">返回首页</button>
    </div>
</template>

<script>
export default {
    methods: {
        goToHome() {
            this.$router.push('/'); // 编程式导航
        }
    }
}
</script>

在组件内部，可以通过 $route.params 访问动态参数。

嵌套路由

真实应用中的UI通常由多层嵌套的组件组成。Vue Router允许你配置嵌套路由，将组件的层级结构与URL的路径结构对应起来。

router/index.js：

const routes = [
    {
        path: '/dashboard',
        component: () => import('../views/Dashboard.vue'),
        children: [ // 嵌套路由
            {
                path: 'profile', // 完整的路径是 /dashboard/profile
                component: () => import('../views/DashboardProfile.vue')
            },
            {
                path: 'settings', // 完整的路径是 /dashboard/settings
                component: () => import('../views/DashboardSettings.vue')
            }
        ]
    }
];

Dashboard.vue：

<template>
    <div>
        <h1>仪表盘</h1>
        <nav>
            <router-link to="/dashboard/profile">个人资料</router-link> |
            <router-link to="/dashboard/settings">设置</router-link>
        </nav>
        <router-view></router-view> <!-- 嵌套路由的组件将渲染在这里 -->
    </div>
</template>

导航守卫 (Navigation Guards)

导航守卫是Vue Router提供的功能，允许你在路由跳转过程中进行拦截或修改。它们常用于权限验证、登录检查、数据加载等场景。

类型：

• 全局守卫：beforeEach, beforeResolve, afterEach。
• 路由独享守卫：beforeEnter。
• 组件内守卫：beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave。

全局前置守卫示例：

router.beforeEach((to, from, next) => {
    // to: 即将进入的目标路由对象
    // from: 当前导航正要离开的路由对象
    // next: 调用该方法才能进入下一个钩子或路由
    const isAuthenticated = false; // 假设用户未登录

    if (to.name !== 'Login' && !isAuthenticated) {
        next({ name: 'Login' }); // 未登录，跳转到登录页
    } else {
        next(); // 允许进入
    }
});

路由元信息 (Meta Fields)

你可以在路由配置中定义 meta 字段，为路由添加自定义数据。这些元信息可以在导航守卫或组件内部访问。

router/index.js：

const routes = [
    {
        path: '/admin',
        component: () => import('../views/Admin.vue'),
        meta: { requiresAuth: true, roles: ['admin'] } // 添加元信息
    }
];

在导航守卫中访问元信息：

router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth && !isAuthenticated) {
        next({ name: 'Login' });
    } else {
        next();
    }
});

总结

Vue Router是构建Vue单页应用不可或缺的工具。通过其强大的路由映射、动态路由、嵌套路由、导航守卫和路由元信息等功能，开发者可以轻松地构建出复杂、灵活且用户体验良好的导航系统。掌握Vue Router，是深入Vue生态系统和开发大型前端应用的关键技能。